﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    <title>coway</title>
    <link rel="stylesheet" href="./css/element.css">
    <link rel="stylesheet" href="./css/common.css?v=0.1">
    <link rel="stylesheet" href="./css/mobileSelect.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/mobileSelect.js"></script>
    <script src="./js/selectDate.js?v=1.5"></script>
</head>

<body>
    <div id="app"  v-loading.fullscreen.lock="loading">
        <div class="header">
            <img src="./img/logo.png" width="120px" alt="" class="log">
        </div>
        <div class="body">
            <p style="color: #00A7E1; border-bottom: 1px solid #DCDFE6; padding: 20px; font-weight: bold; margin: 20px;"
                class="myTitle">
                AUTHORIZATION AGREEMENT FOR RECURRING PAYMENTS</p>
            <el-form :model="ruleForm" label-suffix=":" :rules="rules" ref="ruleForm" label-width="350px"
                class="demo-ruleForm" label-suffix=":" label-position="right">
                <el-form-item label="Payment Date (Circle One)\每月付款日期" prop="PaymentDate">
                    <el-radio-group size="small" v-model="ruleForm.PaymentDate">
                        <el-radio-button label="10th"></el-radio-button>
                        <el-radio-button label="15th"></el-radio-button>
                        <el-radio-button label="20th"></el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="Customer Name\客人姓名" prop="customerName">
                    <el-input v-model="ruleForm.customerName" placeholder="Customer name"></el-input>
                </el-form-item>
                <el-form-item label="Phone\电话号码" prop="phone">
                    （<el-input v-model="ruleForm.phone.n1" type="number" maxlength="3"  oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass" size="small"
                        style="width: 20%"
                        @input="()=>{ruleForm.phone.n1.length>=3?$refs['phone1'].focus():''}">
                    </el-input>）
                    <el-input v-model="ruleForm.phone.n2" type="number" maxlength="3"  oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass" size="small"
                        style="width: 20%;"
                        @input="()=>{ruleForm.phone.n2.length>=3?$refs['phone2'].focus():''}" ref="phone1">
                    </el-input> -
                    <el-input v-model="ruleForm.phone.n3" size="small" type="number" maxlength="4"  oninput="if(value.length>4)value=value.slice(0,4)"
                        class="numInputClass cur" style="width: 30%;" ref="phone2" @input="()=>{ruleForm.phone.n3.length>=4?$refs['phone2'].blur():''}">
                    </el-input>


                    <!-- <el-input v-model="ruleForm.phone" placeholder="Phone"></el-input> -->
                </el-form-item>
                <el-form-item label="Address\地址" prop="address">
                    <el-input placeholder="STREET" v-model="ruleForm.address.n1" size="small"
                        style="width:60%; margin-right:1%">
                        <template slot="prepend">STREET:</template>
                    </el-input>
                    <el-input placeholder="APT" v-model="ruleForm.address.n2" size="small" style="width:38%;">
                        <template slot="prepend"> APT #:</template>
                    </el-input>
                    <el-input placeholder="CITY" v-model="ruleForm.address.n3" size="small"
                        style="width:37%; margin-right:1%">
                        <template slot="prepend">CITY:</template>
                    </el-input>
                    <el-input placeholder="STATE" v-model="ruleForm.address.n4" size="small"
                        style="width:30%; margin-right:1%">
                        <template slot="prepend">STATE:</template>
                    </el-input>
                    <el-input placeholder="ZIP CODE" v-model="ruleForm.address.n5" size="small" style="width:30%;">
                        <template slot="prepend">ZIP CODE:</template>
                    </el-input>
                </el-form-item>

                <el-form-item :labelWidth="30">
                    <el-checkbox v-model="checkedPay">是否支票付款</el-checkbox>
                </el-form-item>

                <div v-if="!checkedPay">
                    <el-form-item label="CARD TYPE\ 选择卡类别" prop="cardType">
                        <el-radio v-model="ruleForm.cardType" label="Visa">Visa</el-radio>
                        <el-radio v-model="ruleForm.cardType" label="MasterCard">Master Card</el-radio>
                        <el-radio v-model="ruleForm.cardType" label="Discover">Discover</el-radio>
                    </el-form-item>
                    <el-form-item label="CARD HOLDER NAME\持卡人姓名" prop="cardHolderName">
                        <el-input v-model="ruleForm.cardHolderName" placeholder="CARD HOLDER NAME"></el-input>
                    </el-form-item>
                    <el-form-item label="CARD #\卡号" prop="cardNo">
                        <el-input v-model="ruleForm.cardNo.n1" placeholder="CARD" maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)"  @input="()=>{ruleForm.cardNo.n1.length>=4?$refs['cardNo1'].focus():''}" style="width: 23%;" type="number"></el-input>-
                        <el-input v-model="ruleForm.cardNo.n2" placeholder="CARD"  maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)" ref="cardNo1" @input="()=>{ruleForm.cardNo.n2.length>=4?$refs['cardNo2'].focus():''}" style="width: 23%;" type="number"></el-input>-
                        <el-input v-model="ruleForm.cardNo.n3" placeholder="CARD"  maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)" ref="cardNo2" @input="()=>{ruleForm.cardNo.n3.length>=4?$refs['cardNo3'].focus():''}" style="width: 23%;" type="number"></el-input>-
                        <el-input v-model="ruleForm.cardNo.n4" placeholder="CARD"  maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)" ref="cardNo3" style="width: 23%;" type="number"  @input="()=>{ruleForm.cardNo.n4.length>=4?$refs['cardNo3'].blur():''}"></el-input>
    
    
                        
                    </el-form-item>
                    <el-form-item label="EXPIRATION DATE\有效期" prop="expirationDate">
                        <el-input v-if="isMobild" id="select_0" placeholder="DATE OF EXPIRATION" v-model="ruleForm.expirationDate"></el-input>

                        <el-date-picker v-else
      v-model="ruleForm.expirationDate"
      type="month" :picker-options="pickerOptions2" value-format="yyyy-MM"
      placeholder="EXPIRATION DATE">
    </el-date-picker>


                        <!-- <el-date-picker  v-model="ruleForm.expirationDate" type="date" placeholder="EXPIRATION DATE" :picker-options="pickerOptions2" format="yyyy-MM" >
                        </el-date-picker> -->
                    </el-form-item>
    
    
                    <el-form-item label="CVV #\信用卡验证码" prop="cvv">
                        <el-input v-model="ruleForm.cvv" placeholder="CVV" maxlength="3"  oninput="if(value.length>3)value=value.slice(0,3)"  type="number" show-word-limit
                        show-password></el-input>
                    </el-form-item>
    

    
    
                    <el-form-item label="BILLING ADDRESS\账单地址" prop="billingAddress">
    
                        <div v-if="!ruleForm.BillingSameAboveLegalAddress">
                            <el-input placeholder="STREET" v-model="ruleForm.billingAddressStreet" size="small"
                                style="width:60%; margin-right:1%">
                                <template slot="prepend">STREET:</template>
                            </el-input>
                            <el-input placeholder="APT" v-model="ruleForm.billingAddressApt" size="small"
                                style="width:38%;">
                                <template slot="prepend"> APT #:</template>
                            </el-input>
                            <el-input placeholder="CITY" v-model="ruleForm.billingAddressCity" size="small"
                                style="width:37%; margin-right:1%">
                                <template slot="prepend">CITY:</template>
                            </el-input>
                            <el-input placeholder="STATE" v-model="ruleForm.billingAddressState" size="small"
                                style="width:30%; margin-right:1%">
                                <template slot="prepend">STATE:</template>
                            </el-input>
                            <el-input placeholder="ZIP CODE" v-model="ruleForm.billingAddressZipCode" size="small"
                                style="width:30%;" maxlength="5" type="text">
                                <template slot="prepend">ZIP CODE:</template>
                            </el-input>
                        </div>
    
                    </el-form-item>
                </div>
                

            
                <el-form-item label="Pay by check\使用支票付款">
                    <el-upload class="upload-demo" drag :action="abc" multiple :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">Please attached the VOIDED check\将付款凭证拖到此处，或<em>点击上传</em></div>
                        <!-- <div class="el-upload__tip" slot="tip">只能使用支票付款</div> -->
                    </el-upload>
                </el-form-item>

                <br>
                <div style="clear: both;"></div>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadBtn">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</body>
    <script src="./js/axios.js"></script>
    <!-- import Vue before Element -->
    <script src="./js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="./js/elementui.js"></script>
    <script src="./js/common.js"></script>
<script>
    let canvas = null;
    const isMobild =  ("ontouchstart" in window)
    new Vue({
        el: '#app',
        data() {
            const validateCardNo = (rule, value, callback) => {
                console.log()
                if (!this.ruleForm.cardNo.n1 || !this.ruleForm.cardNo.n2 || !this.ruleForm.cardNo.n3) {
                    return callback(new Error('请输入完整卡号'));
                }
                callback()
            }
            const validateDate = (rule, value, callback) => {
                console.log()
                if ($('#select_0').val() == '' && isMobild) {
                    return callback(new Error('请输入有效期'));
                }
                if(!isMobild && value == ''){
                    return callback(new Error('请输入有效期'));
                }
                callback()
            }
            const validateBilling = (rule, value, callback) => {
                console.log()
                if (!this.ruleForm.billingAddressStreet || !this.ruleForm.billingAddressCity || !this.ruleForm.billingAddressState || !this.ruleForm.billingAddressZipCode) {
                    return callback(new Error('请输入完整账单地址'));
                }
                callback()
            }
            return {
                checkedPay:false,
                payImage:'',
                isMobild,
                loadBtn: false,
                pickerOptions2:{
                    disabledDate(time) {
                        return time.getTime() < Date.now();
                    },
                },
                loading:true,
                abc: `${window.baseUrl}/api/app/order/uploadPayImage`,
                reword: true,
                img: '',
                points: [],
                canvasTxt: null,
                startX: 0,
                startY: 0,
                moveY: 0,
                moveX: 0,
                endY: 0,
                endX: 0,
                w: null,
                h: null,
                isDown: false,
                ruleForm: {
                    orderId: getQueryVariable('id'),
                    "orderNo": '',
                    referralNo: '',
                    cardNo:{
                        n1:'',
                        n2:'',
                        n3:'',
                        n4:'',
                    },
                    buyWay:'',
                    expirationDate: '',
                    billingAddressStreet: '',
                    zipCode: '',
                    remark: '',
                    receiver: '',
                    billingAddressCity: '',
                    billingAddressState: '',
                    billingAddressApt: '',
                    billingAddressZipCode: '',
                    cvv: '',
                    amount: '',
                    date: '',
                    cardHolderName: '',
                    cardType: 'Visa',
                    PaymentDate: '10th',
                    customerName: '',
                    sellerCode: '',
                    sellerName: '',
                    sellerPhone: '',
                    phone: {
                        n1:'',
                        n2:'',
                        n3:'',
                    },
                    address: {
                        n1: '',
                        n2: '',
                        n3: '',
                        n4: '',
                        n5: '',
                    },
                },
                rules: {
                    customerName: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }, ],
                    phone: [{
                        required: true,
                        message: '请输入电话',
                        trigger: 'blur'
                    }],
                    cardType: [{
                        required: true,
                        message: '请选择分期',
                        trigger: 'change'
                    }],
                    cardNo: [{
                        required: true,
                        validator: validateCardNo,
                        trigger: 'blur'
                    },],
                    billingAddress: [{
                        required: true,
                        validator: validateBilling,
                        trigger: 'blur'
                    },],
                    expirationDate: [{
                        required: true,
                        validator: validateDate,
                        trigger: 'change'
                    }],
                    cvv: [{
                        required: true,
                        message: '请输入CVV信用卡验证码',
                        trigger: 'blur'
                    }],

                }
            }
        },
        methods: {
            handleAvatarSuccess(a, b) {
                this.payImage = a;
            },
            beforeAvatarUpload(file) {
        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png');

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG|PNG 格式!');
        }

        return isJPG;
      },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        try {
                            if (this.loadBtn) return
                            this.loadBtn = true
                            this.loading = true
                            axios({
                                method: 'post',
                                data: {
                                    ...this.ruleForm,
                                    address: `${this.ruleForm.address.n1} ${this.ruleForm.address.n2} ${this.ruleForm.address.n3} ${this.ruleForm.address.n4} ${this.ruleForm.address.n5}`,
                                    cardNo:`${this.ruleForm.cardNo.n1} ${this.ruleForm.cardNo.n2} ${this.ruleForm.cardNo.n3} ${this.ruleForm.cardNo.n4}`,
                                    phone:`${this.ruleForm.phone.n1} ${this.ruleForm.phone.n2} ${this.ruleForm.phone.n3}`,
                                    payImage:this.payImage,
                                    expirationDate:isMobild?$('#select_0').val():this.ruleForm.expirationDate
                                },
                                url: window.baseUrl + '/api/app/order/aCHPayOrder'
                            }).then(res => {
                                this.loading = false
                                this.loadBtn = false
                                if (res.status != 200) {
                                    this.$message.error('服务不可用，请联系管理员')
                                    return
                                }
                                this.$message.success('提交成功/SUMMIT SUCCESSFUL')
                                if(this.ruleForm.buyWay=='paymentAndRental'){
                                    location.href =
                                            '/payment.html?id=' +getQueryVariable('id')
                                }else{
                                    location.href = '/sign.html?id='+getQueryVariable('id')
                                }
                            }, err => {
                                this.loading = false
                                console.log(err, 'err')
                                this.$message.error('服务器异常，请稍后重试！')
                            })
                        } catch (err) {
                            this.loading = false
                            this.$message.error('服务器不可用，请稍后重试')
                        }

                    } else {
                        setTimeout(() => {
                            const isError = document.getElementsByClassName('is-error')
                            isError[0].querySelector('input').focus()
                        }, 100)
                        return false
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        mounted() {

            axios({
                method: 'get',
                url: window.baseUrl + '/api/app/order/' + getQueryVariable('id'),
            }).then(res => {
                this.loading = false
                if (res.status != 200) {
                    this.$message.error('服务不可用，请联系管理员')
                    return
                }

                this.ruleForm.orderNo = res.data.orderNo
                this.ruleForm.referralNo = res.data.referralNo
                this.ruleForm.sellerCode = res.data.sellerCode
                this.ruleForm.sellerName = res.data.sellerName
                this.ruleForm.sellerPhone = res.data.sellerPhone
                this.ruleForm.buyWay = res.data.buyWay  
                
            }, err => {
                console.log(err, 'err')
                this.loading = false
                this.$message.error('服务器异常，请稍后重试！')
            })

            $('#select_0').on('click',function(){
                document.activeElement.blur();
                $('.selectLine').html('<span style="width:48%">年</span ><span style="width:48%">月</span>')
            })


            $.selectDate_YM("#select_0");


            // $('body').on('click','.ensure',function(){
            //     alert(122)
            //     var temD = $('#select_0').val();
            //     setTimeout(()=>{
            //         if(temD.split('-').length == 3){
            //             $('#select_0').val(`${temD.split('-')[0]}-${temD.split('-')[1]}`)
            //         }
            //     },100)
            // })

        }

    })
</script>

</html>